<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: ZJZ
 * @Date: 2021-07-22 17:09:07
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:18:34
-->
<template>
  <div>
    <div>
      <div class="czPsd">重置密码</div>
      <el-form :model="registerForm" ref="registerForm" :rules="registerRules">
        <el-form-item>
          <el-input
            v-model="registerForm.mobile"
            placeholder="请输入手机号"
            style="width: 328Px"
            oninput="value=value.replace(/[^\d]/g,'')"
          >
          </el-input>
        </el-form-item>
        <el-form-item class="onCode" prop="code">
          <el-input
            v-model="registerForm.code"
            placeholder="验证码"
            style="width: 328Px"
          >
            <template slot="suffix">
              <el-button type="text" style="font-size:14Px;font-weight: 400" @click="getCode" v-if="codeShow">
                获取验证码
              </el-button>
            </template>
            <el-button type="text" class="onBtn" v-if="!codeShow">
              {{ count }}秒后重试
            </el-button>
          </el-input>
        </el-form-item>
        <el-form-item class="newPsd" prop="passWord">
          <el-input
            v-model="registerForm.passWord"
            placeholder="新密码：6-16位字符，同时包含字母和数字"
            style="width: 328Px"
          >
          </el-input>
        </el-form-item>
        <el-form-item class="submitChange">
          <el-button
            type="primary"
            @click="onRegister"
            style="width: 328Px; height: 43Px; font-size: 16Px"
          >
            确定
          </el-button>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button type="text" @click="gotoSubmit" style="font-size:14Px;font-weight: 400">返回密码登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getPhoneCode, resetPsd } from "@/api/login";
export default {
  props: {
    register: {
      type: Object,
      required: true,
    },
  },
  data() {
    var passWord = (rule, value, callback) => {
      // 验证手机号的正则表达式
      const Psd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
      if (Psd.test(value)) {
        return callback();
      }
      callback(new Error("密码格式不正确"));
    };
    return {
      count: "",
      codeShow: true,
      informationShow: true,
      registerForm: {
        code: "",
        mobile: "",
        passWord: "",
      },
      registerRules: {
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
        passWord: [
          {
            required: true,
            trigger: "blur",
            validator: passWord,
          },
        ],
      },
    };
  },
  methods: {
    onRegister() {
      resetPsd(this.registerForm).then((res) => {
        this.$message.success(res.msg);
        this.register.registerShow = true;
      });
    },
    getCode() {
      var Reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      // 正则验证
      if (Reg.test(this.registerForm.mobile)) {
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.codeShow = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.codeShow = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
        getPhoneCode({
          mobile: this.registerForm.mobile,
        }).then((res) => {
          this.$message.success(res.msg);
        });
      } else {
        this.$message.error("请输入正确的手机号");
      }
    },
    gotoSubmit() {
      this.register.registerShow = true;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-input__inner {
  width: 328Px;
  height: 40Px;
   color: #2b2b2b;
  &::placeholder {
    font-size: 14Px;
  }
}
.el-form-item {
  margin-bottom: 32Px;
}
.czPsd {
  font-size: 20Px;
  font-weight: 500;
  margin-bottom: 40Px;
}
.submitChange {
  margin-top: 67Px;
  margin-bottom: 2Px !important;
}
</style>